<template>
  <el-dialog title="标记巡更点位置" :visible.sync="show" :close-on-click-modal="false" append-to-body :show-close="!btnLoading" width="1000px" @closed="closed">
    <el-form size="mini" label-width="70px" inline @submit.native.prevent>
      <!--
      <el-form-item label="定位内容" required>
        <el-select v-model="form.positionType" placeholder="选择定位内容" @change="onChangePositionType">
          <el-option label="无定位信息" :value="0" />
          <el-option label="平面图定位" :value="1" />
        </el-select>
      </el-form-item>
      -->
      <el-form-item label="平面图" prop="positionFile" key="positionFile" v-if="form.positionType !== 0">
        <el-select v-model="form.positionFile" placeholder="请选择平面图" clearable @change="onSelectPositionFile" :disabled="proFileLoading">
          <el-option v-for="item in proFileList" :key="item.patProFileId" :label="item.fileName" :value="item.patProFileId" @click.native="onSelectPositionFile">
            <el-image class="select-img g-img-placeholder" :src="item.imgUrl" fit="cover" />
            <span>{{ item.fileName }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" style="margin-left: 10px" @click="addProFile" v-if="form.projectId">新增平面图</el-button>
      </el-form-item>
    </el-form>

    <div class="flex-sb" v-if="form.positionType !== 0 && planInfo.imgUrl">
      <div><span style="color: #f56c6c">*注</span>: 点击图片具体位置即可标注点位</div>
      <div style="font-size: 20px">
        <i class="el-icon-zoom-out pointer" @click="imgZoom -= 0.1" />
        <i class="el-icon-zoom-in pointer" style="margin-left: 10px" @click="imgZoom += 0.1" />
      </div>
    </div>
    <div class="img-box">
      <div class="plan-img" :style="{ width: imgZoom * 100 + '%' }" v-if="form.positionType !== 0">
        <img class="pointer" v-if="planInfo.imgUrl" :src="planInfo.imgUrl" width="100%" @click="onClickPlan">
        <div v-else-if="proFileLoading" v-loading="true" element-loading-background="transparent" style="height: 300px" />
        <div v-else style="text-align: center; margin: 100px 0">暂无图片</div>
        <i v-if="planInfo.imgUrl && positionX" class="el-icon-location" :style="{ left: positionX + '%', top: positionY + '%' }" />
      </div>
    </div>

    <div slot="footer">
      <el-button type="primary" :disabled="disableAction" :loading="btnLoading" @click="btnSubmit">保 存</el-button>
      <el-button :disabled="btnLoading" @click="show = false">取 消</el-button>
    </div>

    <EditProFile ref="EditProFile" v-model="showEditProFile" @ok="getProFileList" />
  </el-dialog>
</template>
<script>
// 标记巡更点位置
import { editFormMixin } from '@/utils/mixin'
import { getFileURL } from '@/api/common'
import { listPatProFile } from '@/api/cq/patrol'
import EditProFile from './EditPatProFile'
export default {
  components: { EditProFile },
  mixins: [editFormMixin],
  data() {
    return {
      form: {
        projectId: '',
        positionType: 0,
        positionObj: '',
        positionContent: '',
        positionFile: ''
      },
      showEditProFile: false,
      proFileLoading: false,
      proFileList: [],
      planInfo: {},
      positionX: 0,
      positionY: 0,
      imgZoom: 1
    }
  },
  computed: {
    disableAction() {
      return this.proFileLoading
    }
  },
  methods: {
    closed() {
      this.form = {
        projectId: '',
        positionType: 0,
        positionObj: '',
        positionContent: '',
        positionFile: ''
      }
      this.proFileList = []
      this.planInfo = {}
      this.positionX = 0
      this.positionY = 0
      this.imgZoom = 1
    },
    async opened(item = {}) {
      await this.getProFileList()
      this.onSelectPositionFile()

      // 初始化点位
      const position = (this.form.positionContent || '').split(',')
      if (position.length === 2) {
        this.positionX = +position[0] || 0
        this.positionY = +position[1] || 0
      }
    },
    async getProFileList() {
      this.proFileList = []
      const { projectId } = this.form
      if (!projectId) return

      this.proFileLoading = true
      const res = await listPatProFile({ projectId }).catch(() => false)
      this.proFileLoading = false
      if (res === false) return

      const data = res.data || []
      data.map(i => {
        i.imgUrl = getFileURL(i.fileId)
      })
      this.proFileList = data
    },
    onChangePositionType() {
      this.form.positionFile = ''
      this.onSelectPositionFile()
    },
    onSelectPositionFile() {
      const { form, proFileList } = this
      const { positionType, positionFile } = form
      if (positionType === 0 || !positionFile) return (this.planInfo = {})

      const info = proFileList.find(i => i.patProFileId === positionFile)
      if (!info) return

      this.planInfo = info
    },
    onClickPlan(e) {
      const imgWidth = e.target.width
      const imgHeight = e.target.height
      const { offsetX, offsetY } = e
      // 百分比
      this.positionX = +((offsetX / imgWidth) * 100).toFixed(8)
      this.positionY = +((offsetY / imgHeight) * 100).toFixed(8)
    },
    addProFile() {
      this.$refs.EditProFile.open({ projectId: this.form.projectId })
    },
    async onSubmit() {
      const opt = JSON.parse(JSON.stringify(this.form))
      if (!opt.positionType && opt.positionType !== 0) return this.$message.info('请先选择定位内容')

      if (opt.positionType === 0) {
        opt.positionObj = ''
        opt.positionContent = ''
        opt.positionFile = ''
      } else if (opt.positionType === 1) {
        if (!opt.positionFile) return this.$message.info('请选择平面图')
        opt.positionObj = '1'
        opt.positionContent = `${this.positionX},${this.positionY}`
      } else return this.$message.info('暂不支持该定位类型')

      this.show = false
      this.$emit('ok', opt)
    }
  }
}
</script>
<style lang="scss" scoped>
.select-img {
  width: 50px;
  height: 100%;
  vertical-align: middle;
  margin-right: 5px;
}
.img-box {
  overflow: auto;
  margin-top: 10px;
  max-height: calc(88vh - 200px);
}
.plan-img {
  position: relative;
  border: 1px solid #ebeef5;
}
.el-icon-location {
  position: absolute;
  font-size: 50px;
  margin-left: -25px;
  margin-top: -50px;
  color: #00adff;
  pointer-events: none;
  text-shadow: 1px 1px 1px rgba(black, 0.1);
  -webkit-box-reflect: below -5px -webkit-linear-gradient(transparent 40%, rgba(black, 0.3));
}
</style>
